<template>
	<div class="">
		<div class="tabnav1">
            <div class="box">
			<div :class="activeInd==0?'active':''" @click="go('http://154.86.20.160:8024/#/')">
				<i v-if="activeInd==0" aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -6.82857rem -1.02857rem;
    background-size: 7.74286rem 7.70714rem;" ></i>
				<i v-else aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -6.82857rem -0.514286rem;
    background-size: 7.74286rem 7.70714rem;"></i>
				<span>{{$t('h_Tabnav.title1')}}</span>
			</div>
			<!-- '/preferential/preferential' -->
			<div :class="activeInd==1?'active':''" @click="go('http://154.86.20.160:8024/#/preferential/live')">
				<i v-if="activeInd==1" aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: 0rem -6.47143rem;
    background-size: 7.74286rem 7.70714rem;"></i>
				<i v-else aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -6.82857rem -5.65714rem;
    background-size: 7.74286rem 7.70714rem;"></i>
				<span>{{$t('h_Tabnav.title2')}}</span>
			</div>
			<div :class="activeInd==2?'active':''" @click="go('http://154.86.20.160:8024/#/mine/promotion')">
				<i v-if="activeInd==2" aria-hidden="true" focusable="false"
					style="display: inline-block;position: relative;width: 0.56rem;height: 0.5rem;background-image: url(/icons/index/main2.png);background-position: -4.58rem -5.48rem;background-size: 7.72143rem 7.12143rem;"></i>
				<i v-else aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -6.82857rem -1.54286rem;background-size: 7.74286rem 7.70714rem;"></i>
				<span>{{$t('l_tuiguang')}}</span>
			</div>
			<!-- <div :class="activeInd==2?'active':''" @click="go('/recharge/recharge')">
				<i v-if="activeInd==2" aria-hidden="true" focusable="false"
					style="display: inline-block;position: relative;width: 0.56rem;height: 0.5rem;background-image: url(/icons/index/main2.png);background-position: -4.58rem -5.48rem;background-size: 7.72143rem 7.12143rem;"></i>
				<i v-else aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -4.05rem -5.48rem;background-size: 7.72143rem 7.12143rem;"></i>
				<span>{{$t('h_Tabnav.title3')}}</span>
			</div> -->
			<div :class="activeInd==3?'active':''" @click="go('http://154.86.20.160:8024/#/index/sevCus')">
				<i v-if="activeInd==3" aria-hidden="true" focusable="false"
					style="display: inline-block;position: relative;width: 0.5rem;height: 0.5rem;background-image: url(/icons/index/main2.png);background-position: -5.67857rem -1.03rem;background-size: 7.72143rem 7.12143rem;"></i>
				<i v-else aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -5.14286rem -5.95714rem;background-size: 7.74286rem 7.70714rem;"></i>
				<span>{{$t('h_Tabnav.title4')}}</span>
			</div>
			<div :class="activeInd==4?'active':''" @click="go('http://154.86.20.160:8024/#/mine/mine')">
				<i v-if="activeInd==4" aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -6.82857rem -4.11429rem;background-size: 7.74286rem 7.70714rem;"></i>
				<i v-else aria-hidden="true" focusable="false"
					style="display: inline-block; position: relative; width: 0.5rem; height: 0.5rem; background-image: url(/icons/index/main2.png);background-position: -6.82857rem -3.6rem;background-size: 7.74286rem 7.70714rem;"></i>
				<span>{{$t('h_Tabnav.title5')}}</span>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		created() {
          
		},
		mounted(){
            let url=localStorage.getItem('caipiao_url')
			this.url = url
            // this.url = this.$route.query.url
            console.log(this.url,'到我了吗？？？')
		},
		data() {
			return {
				url:'',
				activeInd:0
			}
		},
		methods:{
			go(path) {
				
				// this.$router.push(path)
                window.top.location.href=path;
			}
		}
	}
</script>

<style lang="less" scoped>
		// *{
		// 	touch-action: pan-y;
		// }
	.webview{
		width: 100vw;
		// flex: 1;
		height: 100%;
		overflow: hidden;
	}
	.dibu{
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
	}
	.tabnav1 {
		background: var(--theme-top-nav-bg);;
		width: 100vw;
		
		.box {
			align-items: center;
			background: var(--theme-main-bg-color);
			display: -ms-flexbox;
			display: flex;
			height: 1.24rem;
			justify-content: space-around;
			width: 100%;
			box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.1);
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
			box-sizing: border-box;

			div {
				position: relative;
				flex: 1;
				display: flex;
				    flex-direction: column;
				    text-align: center;
			}

			.active {
				span {
					color: var(--theme-filter-active-color);
				}
			}

			i {
				width: 0.5rem;
				height: 0.5rem;
				margin: 0 auto 0.1rem;
			}

			span {
				font-size: .24rem;
				line-height: .24rem;
				color: var(--theme-btm-def-color);
				display: block;
				text-align: center;
				font-weight: bold;
			}
		}

	}
	
</style>